<!-- 设备维保接收审核-->
<template>
  <div class="box" >      
              <div class="left">
                  <div :class="computer">
                      <el-form :inline="true" size="mini"  ref="searchForm" :model="searchForm" style="width:100%">
                          <el-form-item  label-width="65px">
                              <el-select size="mini" placeholder="请选择公司" clearable filterable v-model="searchForm.company"  >
                                  <el-option
                                        v-for="(item,index) in companyData"
                                        :key="index"
                                        :label="item.companyName"
                                        :value="item.companyCode" />
                              </el-select>
                          </el-form-item>
                          <!-- <el-form-item  label-width="65px">
                              <el-select size="mini" placeholder="选择部门" filterable v-model="searchForm.dept" clearable >
                                  <el-option
                                          v-for="(item,index) in deptData"
                                          :key="index"
                                          :label="item.deptName"
                                          :value="item.deptCode" />
                              </el-select>
                          </el-form-item> -->
                          <el-form-item label-width="65px">
                              <el-date-picker
                                      v-model="searchForm.sldate"
                                      type="date"
                                      :clearable="false"
                                      value-format="yyyy/MM/dd"
                                      placeholder="选择日期">
                              </el-date-picker>
                          </el-form-item>
                          <el-form-item>
                              <el-button type="primary" icon="el-icon-search" @click="findlist">查询</el-button>
                          </el-form-item>
                          <!-- <el-form-item style="padding-left:20px">
                              <el-button ><i class="el-icon-refresh-right"></i>重置</el-button>
                          </el-form-item>
                          <el-form-item>
                              <el-button @click="showOther">高级查询<i class="el-icon-caret-bottom"></i></el-button>
                          </el-form-item> -->
                          <!-- <div style="margin-top: 17px;">
                              <el-form-item  label-width="65px">
                                  <el-select size="mini" v-model="searchForm.workstatus" clearable   placeholder="选择类型">
                                      <el-option
                                              v-for="item in scheduleData"
                                              :key="item.dictValue"
                                              :label="item.dictLabel"
                                              :value="item.dictValue" />
                                  </el-select>
                              </el-form-item>
                          </div> -->
                      </el-form>
                  </div>
                  <keep-alive>
                      <el-table
                              :data="tableData"
                              stripe
                              :height="this.cuHeight-260"
                              :max-height="curHeight"
                              style="width: 100%">
                          <el-table-column prop="deptName" label="部门" width></el-table-column>
                          <el-table-column prop="eqpType" label="机械类型" width></el-table-column>
                          <el-table-column prop="eqpNo" label="机械编号" width></el-table-column>
                          <el-table-column prop="bDate,eDate" label="计划维保时间" width>
                              <template slot-scope="scope"> 
                                  {{scope.row.bdate}}~{{scope.row.edate}}
                              </template>
                          </el-table-column>
                      </el-table>
                  </keep-alive>
                  <!-- 分页区域 -->
                  <div class="page">
                      <el-pagination
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="innerPage.totalNum"
                            :current-page='innerPage.pageNum'
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="innerPage.pageSize">
                      </el-pagination>
                  </div>
              </div>
        </div>
</template>

<script>
export default {
  name: "equipment",
  data() {
    return {
      activeTab: 'first',
      show:true,
      checked:true,
      activeName: 'first',
      sat:true,
      senddate:[],
      withdrawdata:[],
      curHeight:Number,
      showOrHidden:false,
      sor:false,
      searchForm:{
        sldate:'',
        company:'',
        dept:'',
        workstatus:''
      },
      searchFormtwo:{},
      value: [],
      //分页
      innerPage:{
        totalNum:0,
        pageNum:1,
        pageSize:10,
      },
      queryall: {
        startpage: 1,
        pagesize: 10,
      },
      companyData: [],//公司列表
      deptData:[],
      deptData2:[],
      scheduleData:[],
      formLabelWidth:"150px",
      tableData: [],
      // 分页
      totalNum: 1,
      // 当前页码
      currentPage: 2,
      flag: true,
      nowData: {},
      compData: [],
    };
  },
  computed:{
      computer:function () {
          if(this.showOrHidden){
            return 'top';
          }else{
            return 'top2';
          }
        },
      timeD() {
        var date = new Date();
        var s1 = date.getFullYear() + "/" + ((date.getMonth() + 1) < 10?"0" + (date.getMonth() + 1):(date.getMonth() + 1)) + "/" + ((date.getDate()+1) < 10?"0" + (date.getDate()+1):(date.getDate()+1));
        return s1;
      }
  },
  beforeMount(){
        this.curHeight = document.documentElement.clientHeight || document.body.clientHeight; 
  },
  async created() {

    // 时间
    this.searchForm.sldate = this.timeD;
    // 作业公司
    await this.getcomp()
    // 列表
    await this.getlistMent();

  },
  mounted() {
    
  },
  methods: {

    // 查询列表
    findlist(){
      this.getlistMent();
    },

    //公司公共接口
    async getcomp(){
      const res = await this.$http.get(`/${this.$ServiceName}/api/external/protected/listworkthirdcompany`)
      if(res.data.code == "0000"){
          this.companyData = res.data.data;
          let compy = []
          for(var i = 0; i < this.companyData.length;i++){
            if(this.companyData[i].companyCode == window.sessionStorage.getItem("companyCode")){
              compy.push(this.companyData[i])
            }
          }
          this.searchForm.company = compy[0].companyCode
        }
    },
    //获取列表
    async getlistMent(){
      const res = await this.$http.get(`/${this.$ServiceName}/api/external/dreportmaintenance/${this.$version}/querylist?mainteMenuType=0${this.searchForm.sldate?"&workDate=" + this.searchForm.sldate:''}${this.searchForm.company?"&orgCode="+this.searchForm.company:''}`,{
        params:this.queryall
      })
        if(res.data.code == "0000"){
              this.tableData = res.data.data.pages;
              this.innerPage.totalNum = res.data.data.totalNum;
            }
    },
    showOther(){
        if(this.showOrHidden){
          this.showOrHidden = false;
        }else
          this.showOrHidden = true;
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.queryall.pagesize = val;
      this.getlistMent();
    },
    // 当前页
    handleCurrentChange(val) {
      this.queryall.startpage = val;
      this.getlistMent();
    },
    // 对话框关闭
  }
};
</script>

<style lang="less" scoped>

.box /deep/ .el-tabs--border-card>.el-tabs__header{
    background-color: #F5F7FA;
    border-bottom: 1px solid #E4E7ED;
}
.box /deep/ .el-tabs--border-card>.el-tabs__content{
    padding: 0;
}
.box /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item{
  transition: all .3s cubic-bezier(.645,.045,.355,1);
    border: 1px solid #E1E4EB;;
    margin-top: -1px;
    color: #909399;
}
/deep/ .el-tabs__header{
  margin:0;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
.pop /deep/ .el-form-item__content{
  margin-left: 20px!important;
}
/deep/.el-drawer__header{
  height: 41px;
  font-size: 16px;
  font-weight: 600;
}
.pop /deep/ .el-form-item {
  margin-bottom: 20px;
}
.pop /deep/ .el-form-item {
  margin-bottom: 20px;
}
.pop /deep/ .el-form-item__content{
  width: 150px;
}
.pop /deep/ .el-select{
  width: 72%;
}
.left /deep/ .el-date-editor.el-input{
  width: 150px;
}

.page /deep/ .el-pagination__editor.el-input{
  width:50px
}
.box .top{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  background: #F5F7FA;
  height: 80px;
  border: 1px solid #E1E4EB;
  border-left: none;
  border-right: none;
}
.box .top2{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0 20px;
  background: #F5F7FA;
  height: 40px;
  border: 1px solid #E1E4EB;
  border-left: none;
  border-right: none;
}
.box /deep/ .el-form--inline .el-form-item{
  margin-right: 0;
}
.tableX .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
   background-color: #ccc !important;
   border-radius: 30px !important;
}
.form-t {
  margin-bottom: 50px;
  padding: 0 1rem;
}
.form-t /deep/ .el-form-item__content {
  margin-left: 1rem !important;
  width: 60%;
}
.left /deep/ .el-input{
  width:150px
}
/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}
/deep/ .el-form-item {
  display: flex;
}
.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding-right: 1rem;
  height: 51px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box {
  border-bottom: 1px solid #e1e4eb;
  border-top: none !important;
  border-radius: 4px 4px 0 0;
}
.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;
  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
/deep/ .el-table .cell {
  white-space: nowrap;
}
/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}
/deep/ .el-pagination {
  text-align: right;
}
/deep/ .el-table th > .cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 8px 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
}
/deep/ .el-table .el-button:focus,
.el-button:hover {
  background-color: #fff;
  color: #338ce8;
  border: 1px solid #e1e4eb;
}
/deep/ .v-modal {
  z-index: 200 !important;
}
/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}
/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}
/deep/ .el-table th:nth-child(1) {
  border-left: none;
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}
/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px;
  padding: 8px 20px 0;
}

.el-button {
  margin-left: 0px !important;
}
/deep/ .el-tabs__item{
    background-color: #F5F7FA;
}
</style>
 